<style>
    .level4 {
        display: none;
    }

    ul li {
        list-style: none;
    }
</style>
<div class="box">
    <div>
        <input type="text" readonly th:value="${roleName}"/>
    </div>
    <div id="treeDemo" class="ztree">
    </div>
</div>
<div style="width: 100%; margin: 20px 0 20px 0; border-bottom: 2px solid #E6E9ED;"></div>
<div class="row" style="margin-top: 10px;margin-left: 1px">
    <input class="btn btn-primary" type="button" th:id="${roleId}" onclick="saveMenu(this)" value="保存"/>
    <input class="btn btn-primary" th:id="${roleId}" type="button" onclick="toMenu(this)" value="重置"/>
    <input class="btn btn-success" type="button" onclick="backToRole()" value="返回"/>
</div>
<script type="text/javascript" th:inline="javascript">

    /*<![CDATA[*/
    var setting = {
        check: {
            enable: true
        },
        callback: {
            onClick: zTreeBeforeClick
        },
        data: {
            simpleData: {
                enable: true
            }
        }

    };

    var zNodes =eval([[${menu}]]);
    var code;

    function setCheck() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            py = $("#py").attr("checked")? "p":"",
            sy = $("#sy").attr("checked")? "s":"",
            pn = $("#pn").attr("checked")? "p":"",
            sn = $("#sn").attr("checked")? "s":"",
            type = { "Y":py + sy, "N":pn + sn};
        zTree.setting.check.chkboxType = type;
        showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
    }
    function showCode(str) {
        if (!code) code = $("#code");
        code.empty();
        code.append("<li>"+str+"</li>");
    }

    $(document).ready(function(){

        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        setCheck();
        $("#py").bind("change", setCheck);
        $("#sy").bind("change", setCheck);
        $("#pn").bind("change", setCheck);
        $("#sn").bind("change", setCheck);
        var treeObj=$.fn.zTree.getZTreeObj("treeDemo");
        var orgS=eval([[${roleMenu}]]);
        var node = treeObj.transformToArray(treeObj.getNodes());
        $.each(orgS,function(i,val){
            $.each(node,function(index,value){
                if(val.menuId==value.id){
                    treeObj.checkNode(node[index],true,true)
                }
            })
        })
    });

    function zTreeBeforeClick(treeId, treeNode, clickFlag) {
        var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
            nodes=treeObj.getCheckedNodes(true),
            v="";
        for(var i=0;i<nodes.length;i++){
            v+=nodes[i].name + ",";
            if(nodes[i].isParent==false){
                alert(nodes[i].name); //获取选中节点的值
            }

        }
    };

    function send2() {
        var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
            nodes=treeObj.getCheckedNodes(true),
            v="";
        c="";
        for(var i=0;i<nodes.length;i++){
            v+=nodes[i].name + ",";
            c+=nodes[i].id + "|";
        }
        $("input[name=roleName]").val(v);
        $("input[name=roleId]").val(c);
    }

    function saveMenu(obj) {
        var roleId = $(obj).attr("id");
//        var _this=obj;
        var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
            nodes=treeObj.getCheckedNodes(true),
            v="",
            menuIds="";
        for(var i=0;i<nodes.length;i++){
            v+=nodes[i].id + ",";
        }
        menuIds=v.substring(0,(v.length-1));
        $(this).attr("disabled","disabled");
        $.post("/role/saveMenu", {"roleId": roleId,"menuId":menuIds}, function (date) {
            if(date=="1") {
                $.MsgBox.Alert("提示", "添加成功");
                $(this).removeAttr("disabled","disabled");
            }else{
                $.MsgBox.Alert("提示", "添加失败");
                $(this).removeAttr("disabled","disabled");
            }
            find();
        });
    }
    function backToRole() {
        find();
    }
    /*]]>*/
</script>
